import React from 'react';
import ReactDOM from 'react-dom';

class StaffAdd extends React.Component{
  handlerAddClick(evt){
    evt.preventDefault();
    let item = {};
    let addForm = ReactDOM.findDOMNode(this.refs.addForm);
    let sex = addForm.querySelector('#staffAddSex');
    let id = addForm.querySelector('#staffAddId');

    item.name = addForm.querySelector('#staffAddName').value.trim();
    item.age = addForm.querySelector('#staffAddAge').value.trim();
    item.descrip = addForm.querySelector('#staffAddDescrip').value.trim();
    item.sex = sex.options[sex.selectedIndex].value;
    item.id = id.options[id.selectedIndex].value;

    /*
     *表单验证
     */
    if(item.name=='' || item.age=='' || item.descrip=='') {
        alert("请完善表单内容");
        return;
    }  

    this.props.addStaffItem(item);
    addForm.reset();

    //此处应在返回添加成功信息后确认
    alert("添加成功");
  }

  render() {
        return (
            <div class="addren">
            <h3>人员新增</h3>
            <form ref='addForm' className="addForm">
                <div className="input-item">
                  <label for='staffAddName'>姓名</label>
                  <input ref='addName' id='staffAddName' type='text' placeholder=''/>
                </div>
                <div className="input-item">
                  <label for='staffAddAge'>年龄</label>
                  <input ref='addAge' id='staffAddAge' type='number' placeholder=''/>
                </div>
                <div className="input-item">
                  <label for='staffAddSex'>性别</label>
                  <select ref='addSex' id='staffAddSex'>
                    <option value='男'>男</option>
                    <option value='女'>女</option>
                  </select>
                </div>
                <div className="input-item">
                  <label for='staffAddId'>身份</label>
                  <select ref='addId' id='staffAddId'>
                    <option value='主任'>主任</option>
                    <option value='老师'>老师</option>
                    <option value='学生'>学生</option>
                    <option value='实习'>实习</option>
                  </select>
                </div>
                <div className="input-item">
                  <label for='staffAddDescrip'>个人描述</label>
                  <textarea ref='addDescrip' id='staffAddDescrip' type='text'></textarea>
                </div>
                <div className="input-item">
                  <label>&nbsp;</label>
                  <button onClick={this.handlerAddClick.bind(this)}>提交</button>
                </div>
            </form>
          </div>
        );
    }
}

export default StaffAdd;